<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<html>
<head>
<%@ include file="/WEB-INF/views/wx/include/head.jsp" %>
<style>
.mui-table-view .mui-media-object {line-height: 60px;max-width: 60px;height: 60px;}
.mui-card-header {background-color:#ffffff !important;}
.mui-modal .mui-content {height: 100% !important;}
.mui-media{padding-right:10px !important;}
</style>
</head>
<body onresize="document.activeElement.scrollIntoView(true);">
	<header class="mui-bar mui-bar-nav">
		<a onclick="history.go(-1);" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">填写订单</h1>
	</header>
	<div class="mui-content">
		<c:set var="genOrdername" value="${tDemands.departcity.sitename} - ${tDemands.destcity.sitename} ${tDemands.rentdays }日定制包车"/>
		<form id="orderForm" action="${ctxWx}/pu/demands/booking" method="post">
			<div style="padding:10px 10px 0px 10px;">
				<span class="mui-ellipsis">${genOrdername }</span>
				<p class="mui-ellipsis">
					<fmt:formatDate value="${tDemands.fromdate}" pattern="yyyy-MM-dd HH:mm"/>
				</p>
				<c:if test="${not empty tDemands.modeldesc }">
					<p>行程描述：</p>
					<p>${tDemands.modeldesc }</p><br/>
				</c:if>
				<p>线路须知：</p>
				<p>1、由出发地至目的地以及目的地返回出发地的行车线路，由车队安排选取最优线路。如用车人需临时更改行车线路，须与车队自行协商，产生的额外费用也由用车人自行承担。</p>
				<p>2、在目的地城市范围内的行车线路可按照用车人需求进行安排。</p>
			</div>
			<input type="hidden" name="ordername" value="${genOrdername }" />
			<input type="hidden" name="dueamount" value="${react.price}"/>
			<input type="hidden" name="demandid" value="${tDemands.demandid}"/>
			<input type="hidden" name="reactid" value="${react.reactid }" />
			<input type="hidden" name="ordertype" value="c" />
			<input type="hidden" name="bookingdays" value="${tDemands.rentdays }" />
			<input type="hidden" name="office.id" value="${react.office.id }" />
			<input type="hidden" name="cargotypeid" value="${tDemands.cartype.cargotypeid }" />
			<input type="hidden" name="realscheid" value="${react.reactid }" />
			<input type="hidden" name="departdateStr" value="<fmt:formatDate value="${tDemands.fromdate}" pattern="yyyy-MM-dd HH:mm:ss"/>" />
			<div class="mui-input-group">
				<div class="mui-input-row">
					<!-- <label style="float: left; width: 35%; padding: 11px 15px;">车型</label> -->
					<label>车型</label>
					<%-- <span  style="float: right; width: 65%; margin-bottom: 0; padding-left: 0;  border: 0;">${tDemands.cartype.typename }(${react.remarks})</span> --%>
					<input type="text" value="${tDemands.cartype.typename }" readonly/>
				</div>
				<c:if test="${not empty react.remarks }">
				<div class="mui-input-row" style="height:120px;">
					<label>车型备注</label>
					<textarea rows="4" maxlength="500" readonly>${react.remarks}</textarea>
				</div>
				</c:if>
				<div class="mui-input-row">
					<label>车辆数</label>
					<input type="text"  name="purchasenum" value="${tDemands.vehiclenum }" readonly/>
				</div>
				<div class="mui-input-row">
					<label>上车地点<span class="required-red">*</span></label>
					<input type="text" id="boardaddr" name="boardaddr" value="${orders.boardaddr }" />
				</div>
				<div class="mui-input-row">
					<label>出发日期</label>
					<input type="text" value="<fmt:formatDate value="${tDemands.fromdate }" pattern="yyyy-MM-dd"/>" readonly>
				</div>
				<div class="mui-input-row">
					<label>出发时间</label>
					<input type="text" value="<fmt:formatDate value="${tDemands.fromdate }" pattern="HH:mm"/>" readonly>
				</div>
				<div class="mui-input-row">
					<label>联系人<span class="required-red">*</span></label>
					<input id="contacts" name="contacts" type="text" value="${tDemands.contactor}" placeholder="填写联系人名称" readonly>
				</div>
				<div class="mui-input-row">
					<label>联系电话<span class="required-red">*</span></label>
					<input id="payertel" name="payertel" type="text" value="${tDemands.contactphone}" placeholder="填写联系电话" readonly>
				</div>
				<div class="mui-input-row" style="height:130px;">
					<label class="control-label" for="payertel">行程备注</label>
					<textarea rows="5" id="remarks" name="remarks" maxlength="500" placeholder="如有多个目的地，请在此填写其他目的地及相应下车点" readonly>${tDemands.remarks}</textarea>
				</div>
			</div>
			<ul class="mui-table-view fix-top-5">
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">预定须知</a>
					<div class="mui-collapse-content">
						<c:set var="noticeType" value="${ORDER_TYPE_RENTPRODUCT_CUSTOM }"/>
						<%@ include file="/WEB-INF/views/include/modules/rentproductNotice.jsp"%>
					</div>
				</li>
			</ul>
			<div class="mui-content-padded">
				<button type="button" class="mui-btn mui-btn-primary mui-btn-block" onclick="check();">去支付￥${react.price}</button>
			</div>
		</form>

		<div class="fix-bottom2"></div>
	</div>
	<%@ include file="/WEB-INF/views/wx/include/script.jsp"%>
	<script>
		mui.init({
			swipeBack:true
		});
		
		function check(){
			var msg = '';
			if($('#boardaddr').val().trim()==''){
				msg='上车地点不能为空';
			}
			var r = /^1[3|4|5|7|8]\d{9}$/;
			var payertel = $('#payertel').val();
			var contacts = $('#contacts').val();
			if(contacts.trim() == ''){
				msg = '联系人不能为空';
			} else if(payertel.trim() == ''){
				msg = '手机号不能为空';
			} else if(!r.test(payertel)){
				msg = '手机号不正确';
			} 
			if(msg != ''){
				mui.alert(msg, '提示');
			} else {
				$('#orderForm').submit();
			}
		}
	</script>
</body>
</html>